<!--
 * @Author: hupaocai 13767071930@163.com
 * @Date: 2025-03-26 17:17:13
 * @LastEditors: hupaocai 13767071930@163.com
 * @LastEditTime: 2025-03-29 11:49:01
 * @FilePath: /banban/pages/login/components/phone.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="phone-page" :style="`padding-top: ${statusBarHeight}px`">
        <PageHeader>
            <template #left>
                <view class="back" @tap="navBack"> <uni-icons type="left" color="#1e232c" size="18px"/> </view>
            </template>
            <template #right>
                <view v-if="showSkip" class="skip" @tap="navSkip"> 跳过 </view>
            </template>
        </PageHeader>

        <view class="welcome-title">{{ welTitle }}</view>

        <view class="phone-container">
            <view class="phone-prefix">+86</view>
            <view>
                <uni-easyinput class="phone-input" type="number" :placeholderStyle="placeholderStyle" v-model="phone" placeholder="输入手机号" :inputBorder="false" primaryColor="#5d5fef" />
            </view>
        </view>

        <view class="primary-button" @tap="sendCode">发送验证码</view>
    </view>
</template>
<script setup>
import PageHeader from '@/components/page-header'
import { ref, computed, nextTick } from 'vue';
import store from '@/store/index.js';
import { getCodeVerify } from '@/api/user'
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/utils/common'
const statusBarHeight = computed(() => store.state.systemInfo.statusBarHeight)

const pageType = ref('login'); // login: 默认是登录用的;  bind: 绑定手机号
const phone = ref('')
const nfcId = ref('')
const showSkip = ref(true)

const welTitle = computed(() => {
    return pageType.value === 'bind' ? '绑定手机号' : '欢迎登录伴伴'
})

const pattern =  /^1[3-9]\d{9}$/

const placeholderStyle = ref("font-size:16px; color:#a6a6a6;")

const sendCode = async () => {
    try {
        if (pattern.test(phone.value)) {

            const { code, msg } = await getCodeVerify({ phone: phone.value })

            if (code === 500002) {
                toast({ title: msg, icon: 'none' });
                return
            }

            if (code === 0) {
                toast({ title: '发送成功', icon: 'success' }, () => {
                    if (pageType.value === 'bind') {
                        uni.navigateTo({
                            url: '/pages/bindDevice/togglePhone' + `?phone=${phone.value}&type=bind`,
                        });
                        return
                    }
                    navTo()
                })
                return
            }
            toast({ title: msg, icon: 'none' })
        } else {
            toast({ title: '请输入正确的手机号', icon: 'none' })
        }
    } catch (e) {}
}

// 下一步地址
const navTo = () => {
    if (pageType.value === 'login') {
        uni.navigateTo({
            url: "/pages/login/verificationCode?type=login&phone=" + phone.value,
        });
    } else {
        uni.navigateTo({
            url: '/pages/bindDevice/togglePhone' + `?phone=${phone.value}&type=bind`,
        });
    }
}

// 返回
const navBack = () => {
    uni.navigateBack();
};

// 跳过
const navSkip = () => {
    uni.showToast({
        title: '去首页',
        icon: 'none'
    })
}

nextTick(() => {
})

onLoad((opt) => {
    // 进入当前页面的用途
    pageType.value = opt.type || 'login'
    if (opt.nfcId) {
        nfcId.value = opt.nfcId
        showSkip.value = true
    } else {
        showSkip.value = false
    }


})

</script>
<style lang="scss">
.phone-page {
    box-sizing: border-box;

    .back {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60rpx;
        height: 60rpx;
        border-radius: 10rpx;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(232, 236, 244, 1);
    }

    .skip {
        height: 60rpx;
        line-height: 60rpx;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        color: rgba(0, 152, 255, 1);
        text-align: center;
        vertical-align: top;
    }

    .welcome-title {
        width: 80vw;
        margin: 68px auto 0;
        font-size: 32px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 18.75px;
        color: rgba(0, 0, 0, 1);
        vertical-align: bottom;
    }

    .primary-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100vw - 50px);
        height: 48px;
        margin: 0 auto;
        opacity: 1;
        border-radius: 8.02px;
        background: #5d5fef;
        box-shadow: 0px 0px 0px 6.42px rgba(255, 255, 255, 0.15);

        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 21.1px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }

    .phone-container {
        width: 80vw;
        margin: 0 auto;
        margin-top: 64px;
        margin-bottom: 100px;
        display: flex;
        /* justify-content: center; */
        align-items: center;
        
        .phone-prefix {
            font-size: 28px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 32.82px;
            color: rgba(0, 0, 0, 1);
            text-align: left;
            vertical-align: top;
        }

        .phone-input {

            .uni-easyinput__content-input  {
                font-size: 24px;
            }
        }
    }
}
</style>